<template>
    <div class="rwCard-container">
        <div class="rwCard-body">
            <div class="setScheme-mission-card">
                <div class="missionCard-container">
                    <div class="missionCard" v-for="(item,index) in missionCardList" >
                        <!--*******************************************************任务展示面板******************************************************-->
                        <div v-show="editMark!=index" class="missionCard-scan">
                            <el-row class="missionCard-scan-text">
                                <el-col :md="17" :lg="17">
                                    <ul class="missionCard-Div-ul">
                                        <li>任务名称：{{missionCardList[index].name}}</li>
                                        <li>任务类型：{{missionCardList[index].rwlxmc}}</li>
                                        <li>执行人员：{{missionCardList[index].nickName}}</li>
                                        <li>任务状态：{{missionCardList[index].status}}</li>
                                        <li>任务经度：{{missionCardList[index].executionPointLatitude}}</li>
                                        <li>任务纬度：{{missionCardList[index].executionPointLongitude}}</li>
                                        <el-tooltip class="item" effect="light"
                                                    :content="missionCardList[index].description"
                                                    placement="top">
                                            <li><span>任务描述：{{rwmsStrs(missionCardList[index].description)}}</span></li>
                                        </el-tooltip>
                                    </ul>
                                </el-col>
                            </el-row>
                            <div class="missionCard-Div missionCard-Div-btnGroup">
                                <el-button size="small" id="missionCard_cancelBtn" @click="deleteMission(index)" v-show="opAuth">删除
                                </el-button>
                                <el-button size="small" id="missionCard_SaveBtn" @click="openEdit(index)" v-show="opAuth">编辑
                                </el-button>
                            </div>
                        </div>
                        <!--*******************************************************任务编辑面板******************************************************-->
                        <div v-show="editMark==index" class = 'edite-missonCards'>

                            <el-form label-position="right" label-width="80px" :model="formLabelAlign">
                                <el-form-item label="任务名称">
                                    <el-input placeholder="请输入任务名称"
                                              v-model="formLabelAlign.name"
                                              clearable
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="任务类型">
                                   <!-- <el-input placeholder="请输入任务类型"
                                              v-model="formLabelAlign.typeId"
                                              clearable
                                    ></el-input>-->
                                    <el-select  v-model="formLabelAlign.typeId" placeholder="请选择任务类型" @change="$forceUpdate()">
                                        <el-option
                                                v-for="item in rwlxArr"
                                                :key="item.rwlxid"
                                                :label="item.rwlxmc"
                                                :value="item.rwlxid">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="执行人员">
                                    <!-- <el-input placeholder="请输入任务类型"
                                               v-model="formLabelAlign.typeId"
                                               clearable
                                     ></el-input>-->
                                    <el-select  v-model="formLabelAlign.executorId" placeholder="请选择执行人员" @change="$forceUpdate()">
                                        <el-option
                                                v-for="item in zxryArr"
                                                :key="item.executorId"
                                                :label="item.nickName"
                                                :value="item.wxryxxid">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="任务状态">
                                    <el-input v-model="formLabelAlign.status"
                                              clearable
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="任务经度">
                                    <div  @click = 'selectPoint'>
                                        <el-input placeholder="请输入任务经度"
                                                  v-model="formLabelAlign.executionPointLatitude"
                                                  clearable
                                        ></el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item label="任务纬度">
                                   <!-- <div  @click = 'selectPoint'>-->
                                    <el-input placeholder="请输入任务纬度"
                                              v-model="formLabelAlign.executionPointLongitude"
                                              clearable
                                    ></el-input>
                                <!--    </div>-->
                                </el-form-item>
                                <el-form-item label="任务描述">
                                    <el-input
                                            class = 'input-textarea-misson'
                                            type="textarea"
                                            placeholder="请输入任务描述"
                                            v-model="formLabelAlign.description"
                                            ></el-input>
                                </el-form-item>
                            </el-form>

                            <div class="missionCard-Div missionCard-Div-btnGroup missionCard-Div-btnGroup-edit">
                                <el-button size="small" id="missionCard_cancelBtn" @click="cancelMissionEdit(index)">取消
                                </el-button>
                                <el-button size="small" id="missionCard_SaveBtn" @click="saveMission(index)">保存
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <div class="addMissionCards">
                        <i class="el-icon-plus addMission-icon" @click="addMission()"></i>
                        <p>添加阶段任务</p>
                    </div>

                </div>
            </div>
        </div>
        <tMapDialog ref="tMapDialog" :showTmapDialog="showTmapDialog"></tMapDialog>
    </div>
</template>

<script>
    import {baseServe} from "../../request/api"
    import tMapDialog from "./tMapDialog"
    export default {
        name: "rwCard",
        data(){
            return{
                //任务管理新增/编辑弹窗显示
                rwglDialog:false,
                //拾取经纬度弹窗
                showTmapDialog:false,

                //选择的任务类型index
                chooseLx:0,
                pageType: "missonCard",
                ifAdd: false,//判别新增还是编辑
                editMark: null,//编辑面板和展示面板的控制
                selectMissinType: [],//用户选择后的任务类型数据
                missonFormData: {},//任务卡片的数据表单
                missionCardList: [],//任务卡片的数据表单列表
                missonType: "",//任务类别标识
                opAuth:true,//任务面板编辑、删除的权限控制
                //表单数据
                formLabelAlign: {
                    typeId:'',
                    name:'',
                    status:'未完成',
                    description:'',
                    executionPointLatitude:'',
                    executionPointLongitude:'',
                    executorId:''
                },
                //任务类型的下拉框数据
                rwlxArr:[{
                    rwlxmc:'测试任务类型',rwlxid:'asdw12adwqfas'
                }],
                //执行人员下拉数据
                zxryArr:[{
                    nickName:'测试任务类型',wxryxxid:'asdw12adwqfas'
                }],

            }
        },
        components:{
            tMapDialog
        },
        mounted() {
            this.initRwlxList();
            this.initWXry();
            this.initData();
        },
        watch:{

        },
        computed: {
            rwmsStrs() {
                return function (str) {
                    if(str==null||str==undefined){
                        return '暂无';
                    }
                    return ((str).length>=50)?(str.substring(0,45)+"..."):str
                }
            }
        },
        methods:{
            //复位数据
            recoveryData(){
                this.formLabelAlign =  {
                    typeId:'',
                    name:'',
                    status:'未完成',
                    description:'',
                    executionPointLatitude:'',
                    executionPointLongitude:'',
                }
            },
            //初始化数据
            initData(){
                let that = this;
                let params = {
                    taskRelatedQueryCondition: {
                        schemeId:'',
                    }
                }
                if(this.$store.state.schemeId){
                    params.taskRelatedQueryCondition.schemeId = this.$store.state.schemeId;
                }else{
                    params.taskRelatedQueryCondition.schemeId = sessionStorage.getItem('schemeId');
                }
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                baseServe.selectMission(params).then(res =>{
                    if(res.data.success==true){
                        loading.close();
                        that.missionCardList = that.handleInitData(res.data.data);
                        that.matchNickName()
                    }
                }).catch(err=>{
                    loading.close()
                    console.error(err);
                })
            },
            //处理初始化数据字段
            handleInitData(data){
                data.forEach((res)=>{
                   res.name = res.czdrwmc;
                   res.status = res.czdrwzt;
                   res.description = res.czdrwms;
                   res.executionPointLongitude = res.czdrwzxdjd;
                   res.executionPointLatitude = res.czdrwzxdwd;
                })
                return data
            },
            //初始化任务类型列表
            initRwlxList(){
                let that = this;
                baseServe.getMissionType().then(res =>{
                    if(res.data.success==true){
                        that.rwlxArr = res.data.data
                    }
                }).catch(err=>{
                    console.error(err);
                })
            },
            //初始化微信人员信息，也就是执行人员下拉数据
            initWXry(){
                let that = this;
                baseServe.selectAllWxRy().then(res =>{
                    if(res.data.success==true){
                        that.zxryArr = that.zxryArrFilter(res.data.data)
                    }
                }).catch(err=>{
                    console.error(err);
                })
            },
            //过滤空白
            zxryArrFilter(data,callBack){
                let returnArr = []
                let zxryArrFilter =  data.filter((res)=>{
                    return res.length>0
                })
                zxryArrFilter.forEach((res)=>{
                    res.forEach((Res)=>{
                        returnArr.push(Res);
                    })
                });
                //如果已经存在任务，就匹配一下,不然编辑的时候无法显示执行人
                if(this.missionCardList.length>0){
                    this.matchNickName(returnArr);
                }
                return returnArr;
            },
            //匹配昵称，用于显示
            matchNickName(returnArr){
                if(returnArr === undefined){
                    returnArr = this.zxryArr;
                }
                let that = this;
                returnArr.forEach((res)=>{
                       that.missionCardList.forEach((RES)=>{
                        if(res.wxryxxid === RES.czdrwzxrid){
                            RES.nickName = res.nickName;
                        }
                    })
                })
            },
            //打开地图弹窗，拾取经纬度
            selectPoint(){
                this.showTmapDialog = true;
            },
            //增加任务卡片
            addMission() {
                this.missionCardList.push({description:"请输入描述"});
                this.ifAdd = true;
                this.editMark = this.missionCardList.length - 1;

            },
            //取消任务编辑/新增
            cancelMissionEdit(index) {
                if(this.ifAdd === true){
                    this.missionCardList.splice(index,1);
                    this.ifAdd = false;
                }
                this.editMark = null;
            },
            //进入任务编辑
            openEdit(index) {
                let that  = this;
                this.editMark = index;
                this.formLabelAlign = this.missionCardList[index];
                this.formLabelAlign.executorId = this.formLabelAlign.czdrwzxrid
                this.rwlxArr.forEach((res)=>{
                    if(res.rwlxmc === that.formLabelAlign.rwlxmc){
                        that.formLabelAlign.typeId = res.rwlxid;
                    }
                })

            },
            //保存任务
            saveMission(index){
                let that = this;
                //表单数据赋值
                let params = this.formLabelAlign
                //commandTaskId和executorId暂时传假值
                params.commandTaskId = 'asdqwras123q4rasdq'
                //从vuex或者缓存获取方案id
                if(this.$store.state.schemeId){
                    params.schemeId = this.$store.state.schemeId;
                }else{
                    params.schemeId = sessionStorage.getItem('schemeId');
                }
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.ifAdd){
                    baseServe.addMission(params).then(res =>{
                        if(res.data.success==true){
                            loading.close();
                            that.$message({
                                message: "保存成功！",
                                type: 'success'
                            });
                            that.initData();
                            that.recoveryData()
                        }
                    }).catch(err=>{
                        loading.close()
                        console.error(err);
                    })
                }else{
                    //获取任务id
                    params.id = params.czdrwid;
                    baseServe.editeMission(params).then(res =>{
                        if(res.data.success==true){
                            loading.close();
                            that.$message({
                                message: "保存成功！",
                                type: 'success'
                            });
                            that.initData();
                            that.recoveryData();
                        }
                    }).catch(err=>{
                        loading.close()
                        console.error(err);
                    })
                }
                //更新状态
                if(this.ifAdd === true){
                    this.ifAdd = false;
                }
                this.editMark = null;

            },
            //删除任务
            deleteMission(index){
                let that = this;
                let params = {};
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                //获取任务id
                params.taskId  = this.missionCardList[index].czdrwid;
                baseServe.deleteMission(params).then(res =>{
                    if(res.data.success==true){
                        that.initData();
                        that.$message({
                            message: "删除成功！",
                            type: 'success'
                        });
                    }else{
                        loading.close()
                        console.error(res);
                    }
                }).catch(err=>{
                    loading.close()
                    console.error(err);
                })
            }

        }
    }
</script>

<style >
  @import "../../assets/css/fagl/rwCard.css";

</style>
